<script setup>
  import { useUserStore } from '@/stores'

  const userStore = useUserStore()

  // 跳转到登录页
  const gotoLoginPage = () => {
    uni.navigateTo({
      url: '/pages/profile/login'
    })
  }

  // 跳转到编辑页
  const gotoEditPage = () => {
    uni.navigateTo({
      url: '/pages/profile/edit'
    })
  }

  // 预览图片
  const onPreview = (url) => {
    uni.previewImage({
      urls: [url],
      longPressActions: {
        itemList: ['发送给朋友', '保存图片', '收藏'],
        success: (res) => {
          console.log(res)
        },
        fail: (res) => {
          console.log(res.errMsg)
        }
      }
    })
  }

  // 退出登录
  const onLogout = () => {
    uni.showModal({
      title: '提示',
      content: '确认要退出比特找房么?',
      success: (modalRes) => {
        if (modalRes.confirm) {
          userStore.logoutAction()
        }
      }
    })
  }
</script>

<template>
  <view class="profile">
    <view class="profile-header">
      <view class="profile-header-bottom">
        <image
          class="profile-header-bottom__default-avatar"
          :src="
            userStore.profile.avatar ||
            'https://bitejiaoyan.oss-cn-chengdu.aliyuncs.com/bitehouse/web/profile/default-avatar.png'
          "
          mode="scaleToFill"
        />
        <text
          v-if="userStore.token"
          class="profile-header-bottom__text"
          >{{ userStore.profile.nickName }}</text
        >
        <text
          v-else
          class="profile-header-bottom__text"
          @click="gotoLoginPage"
          >点击登录</text
        >
      </view>
    </view>
    <scroll-view
      scroll-y
      class="profile-body"
    >
      <bit-cell
        v-if="userStore.token"
        leftText="编辑资料"
        @click="gotoEditPage"
      />
      <view class="profile-body-qrcode">
        <image
          class="profile-body-qrcode__image"
          src="https://bitejiaoyan.oss-cn-chengdu.aliyuncs.com/bitehouse/web/profile/bit-qrcode.png"
          :show-menu-by-longpress="true"
          mode="scaleToFill"
          @tap="onPreview('https://bitejiaoyan.oss-cn-chengdu.aliyuncs.com/bitehouse/web/profile/bit-qrcode.png')"
        />
        <view class="profile-body-qrcode__text">
          <view>扫二维码</view>
          <view>关注"比特就业课"公众号</view>
        </view>
      </view>
      <view
        class="profile-body-btn"
        v-if="userStore.token"
      >
        <button
          class="profile-body-btn__logout"
          @click="onLogout"
        >
          退出登录
        </button>
      </view>
    </scroll-view>
  </view>
</template>

<style scoped lang="scss">
  @import '@/styles/variable.scss';
  @import '@/styles/mixins.scss';
  .profile {
    &-header {
      position: fixed;
      top: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      width: 100vw;
      height: 354rpx;
      background-image: linear-gradient(to bottom, #22cfff, #0fa1fe);
      &-bottom {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        padding: 30rpx;
        &__default-avatar {
          width: 118rpx;
          height: 118rpx;
          border-radius: 100%;
        }
        &__text {
          margin-left: 23rpx;
          font-size: 36rpx;
          font-weight: 600;
          color: #fff;
        }
      }
    }
    &-body {
      position: fixed;
      left: 0;
      right: 0;
      top: 354rpx;
      bottom: 0;
      box-sizing: border-box;
      padding: 20rpx 30rpx 0;
      background-color: var(--main-bg-color);
      &-qrcode {
        height: 506rpx;
        padding-top: 266rpx;
        background-color: #fff;
        text-align: center;
        &__image {
          width: 280rpx;
          height: 280rpx;
        }
        &__text {
          margin-top: 22rpx;
          font-size: var(--font-size-md);
          font-weight: 600;
          color: var(--text-color-dark);
        }
      }
      &-btn {
        padding-bottom: 20rpx;
        &__logout {
          margin-top: 30rpx;
          height: 100rpx;
          line-height: 100rpx;
          background-color: #fff;
          font-size: var(--font-size-md);
          font-weight: 500;
          color: var(--text-color-middle);
        }
      }
    }
  }
</style>
